<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<title>填写购买信息-ZoomYoung个性T恤</title>
<link rel="stylesheet" type="text/css" href="css/all.css">
<link rel="stylesheet" type="text/css" href="css/information.css">

<link href="http://file.zoomyoung.cn/web/css/framework7.ios.min.css" rel="stylesheet" />
<script type="text/javascript" src="http://file.zoomyoung.cn/web/js/jquery-1.8.3.min.js"></script>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://file.zoomyoung.cn/web/js/ajax/ajaxFeng.js"></script>

</head>
<body>
<div class="zhang">
	  <div class="all">
        <div class="header">
             <div class="header_cloth">
                 <div class="cloth_bg"><img src="" class="cloth"/></div>
             <div class="header_title">
                <span class="title_larger">个性定制纯棉T恤</span>
                <span class="title_small">白色/正背面印刷</span>
             </div>
             <div class="header_num">
                <div class="reduce">-</div>
                <input type="text" class="number" value="1" readonly/>
                <div class="add">+</div>
             </div>
            </div>
        </div>
        <div class="from">
          <span class="tip">男女同款，小姐姐选小一码哦</span>
          <ul class="wrap_ul">
            <li class="wrap_li">
              <ul class="wrap_size">
                <li class="www">S</li>
                <li>M</li>
                <li>L</li>
                <li>XL</li>
                <li class="xxl">XXL</li>
              </ul>
            </li>
          </ul>
          <div class="hr"></div>
          <div class="write">
            <span class="write_tip">填写信息</span>
                <ul class="write_detail">
                  <li>
                    <span class="write_people">收件人</span><label>（要准确填写收件人姓名哦）</label>
                    <input type="text"  name="name" class="name" placeholder="请选择姓名"/>
                    <img src="http://file.zoomyoung.cn/web/img/error.png"/>
                  </li>
                  <li>
                    <span class="write_tel">电话</span><label>（手机号怎么能填错呢！）</label>
                    <input type="tel"  name="tel" class="tel" placeholder="请选择电话号码"/>
                    <img src="http://file.zoomyoung.cn/web/img/error.png"/>
                  </li>
                  <li>
                    <span class="write_area">收货地址</span><label>（收货地址也要选择哦！）</label>
                     <input type="text" placeholder="请选择城市" readonly id="location" name="location">
                     <img src="http://file.zoomyoung.cn/web/img/error.png"/>
                  </li>
                  <li>
                    <textarea   class="area" class="jiedao" id="address_detail" placeholder="请选择街道名称"></textarea >
                    <img src="http://file.zoomyoung.cn/web/img/error.png"/>
                  </li>
                  <li style="opacity: 0">
                    <textarea  class="area area1" class="jiedao" placeholder="请选择街道名称"></textarea >
                    <img src="http://file.zoomyoung.cn/web/img/error.png"/>
                  </li>
                </ul>
          </div>  
        </div></div>
	  </div>
      <div class="footer">
       <div class="footer_position">
         <div class="footer_price">
           <span class="footer_price_money"></span><span class="footer_price_num"></span><span class="footer_price_detail"></span>
         </div>
         <div class="footer_buyBtn">立即购买</div>
       </div>
    </div>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?2a04b9d7f4b4a0edfe491497d0cfa626";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    $(function () {
//        window.onload = function () {s
            var a = ($(document).width() / 750) * 100 + "px";
            $('html').css('fontSize', a);
            /*滑动事件*/
            var heightA = $('body').height() - $('.footer').height() + "px"
            $('.zhang').css("height", heightA);
            checkLogin();
            getBuildInfo();
//        }

        //检查是否登录
        function checkLogin() {
            $.ajax({
                url: "http://zoomyoung.cn/api/auth/get-userinfo",
                type: "get",
                dataType: "json",
                xhrFields: {              //跨域设置
                    withCredentials: true, //跨域设置
                },
                crossdomain: true,
                async: false,
                success: function (obj) {
                    if (obj.message == "no_login") {
                        var code = getUrlArgStr();
                        var callback = encodeURI("http://design.zoomyoung.cn/information.html?"+code);
                        $(window).attr('location', 'http://zoomyoung.cn/api/auth/wechat-login?callback='+callback);
                    } else {
                        if (obj.data.useraddress && obj.data.useraddress != '') {
                            var name = obj.data.useraddress.consignee;
                            var tel = obj.data.useraddress.mobilephone;
                            var province = obj.data.useraddress.province;
                            var city = obj.data.useraddress.city;
                            var area = obj.data.useraddress.area;
                            var detail = obj.data.useraddress.add_detail;

                            $('.name').val(name);
                            $('.tel').val(tel);
                            $('#location').val(province + " " + city + " " + area);
                            $('#address_detail').html(detail);
                        }
                    }
                },
                error: function (obj) {
                    return false;
                }
            });
        }

        var total = 0;
        var clothes_price = 0;
        var down_price = 0;
        var up_price = 0;

        function getBuildInfo() {

            var codeObj = getUrlArgStr();
//        console.log(codeObj);
            var callback = encodeURI(codeObj);
            $.ajax({
                url: "http://zoomyoung.cn/api/design/get-build-by-code?" + callback,
                type: "get",
                dataType: "json",
                xhrFields: {                 //是否允许后台保存cookie
                    withCredentials: true,
                },
                crossdomain: true, //跨域设置
                success: function (obj) {
                    if (obj.level == "success") {
                        setClothesInfo(obj);
                        $('.cloth').attr('src', obj.data.goods_img_url)
                    } else {
                        alert(obj.message);
                    }
                },
                error: function (obj) {
                    console.log(obj);
                    alert("系统错误");
                }
            });
        }

        function setClothesInfo(obj) {
            total = obj.data.price;
            clothes_price = obj.data.clothes_price;
            up_price = obj.data.up_price;
            down_price = obj.data.down_price;
            $('.footer_price_money').html("¥" + total);
            $('.footer_price_num').html(total + "/件x 1");
            $('.footer_price_detail').html("T恤" + clothes_price + "元+正面" + up_price + "元+背面" + down_price);
            /*添加衣服件数*/
            var number = $('.wrap_ul>li').length;
        }

        var num = 1;

        function add() {
            if (num >= 5) {
                alert('最多只可同时购买5件哦！');
                return;
            }
            num++;
            $('.number').val(num);
            var allAmount = num * total;
            $('.footer_price_money').html("¥" + allAmount);
            $('.footer_price_num').html(total + "/件x " + num);
            $('footer_price_detail').html("T恤" + clothes_price + "元+正面" + up_price + "元+背面" + down_price);
            $('.wrap_ul').append('<li class="wrap_li"><ul class="wrap_size"><li class="www">S</li><li>M</li><li>L</li><li>XL</li><li class="xxl">XXL</li></ul></li>');
            $('.wrap_size li').on('click', dian)
        }

        function reduce() {
            if (num <= 1) {
                alert('最少选择1件哦！');
                return;
            }
            num--;
            var allAmount = num * total;
            $('.number').val(num);
            $('.footer_price_num').html(total + "/件x " + num);
            $('.footer_price_money').html("¥" + allAmount);
            $('footer_price_detail').html("T恤" + clothes_price + "元+正面" + up_price + "元+背面" + down_price)
            $('.wrap_ul>li:last').remove();
        }

        /*绑定add和reduce按钮事件*/
        $('.reduce').on("click", reduce);
        $('.add').on("click", add);

        /*  input失去焦点后执行*/
        $('.number').blur(function (event) {
            input();
        });

        function input() {
            var inputNum = $('.number').val();
            if (inputNum > 0 || inputNum < 5) {
                $('.wrap_ul>li').remove();
                for (var i = 0; i < inputNum; i++) {
                    $('.wrap_ul').append('<li class="wrap_li"><ul class="wrap_size"><li>S</li><li>M</li><li>L</li><li>XL</li><li class="xxl">XXL</li></ul></li>');
                }
            }
        }

        /*选择尺寸*/
        $('.wrap_li li').on('click', dian)
        function dian() {
            var index = $(this).index();
            $(this).parent().find('li').eq(index).addClass('www').siblings().removeClass('www');
        }


        var search = window.location.search;
        var index = search.indexOf('&') - 6;
        var code = search.substr(6, index);
        var is_action = search.substr(-1)
        //判断是否在活动期间，
        if (is_action == 1) {
            $('.header_num').hide();
            $('.footer_buyBtn').html('免费领取')
            $('.footer_price_money').css('textDecoration', 'line-through')
            $('.footer_price_num').hide()
        } else {
            $('.header_num').show();
            $('.footer_buyBtn').html('立即购买')
            $('.footer_price_money').css('textDecoration', 'none')
            $('.footer_price_num').show()
        }
        //购买按钮的点击事件
        $('.footer_buyBtn').click(function () {
            var name = $('.name').val();
            var tel = $('.tel').val();
            var jie = $('.area').val();
            var city = $('#location').val();
            var size = [];
            for (var i = 0; i < $('.wrap_li').length; i++) {
                for (var j = 0; j < $('.wrap_li').eq(i).find('li').length; j++) {
                    if ($('.wrap_li').eq(i).find('li').eq(j).is('.www')) {
                        size.push($('.wrap_li').eq(i).find('li').eq(j).html())
                    }
                }
            }
            var jsonData1 = {
                code: code,
                size: size,
                address_area: city,
                address_info: jie,
                phone: tel,
                consignee: name
            };

            var oli = $('.write_detail li');
            //用于检查是否填写正确信息
            var checkItemResult = yan(name, tel, jie, city, oli);
            if (checkItemResult) {
                $.ajax({
                    url: 'http://zoomyoung.cn/api/design/build-order',
                    type: "post",
                    dataType: "json",
                    data: jsonData1,
                    xhrFields: {              //跨域设置
                        withCredentials: true, //跨域设置
                    },
                    crossdomain: true,
                    success: function (obj) {
                        if (is_action == 1) {
                            window.location.href = './finish.html' + search;
                        } else {
                            startJsApiPay(obj.data.order_num);
                        }
                    },
                    error: function (obj) {
                        console.log(obj);
                        alert('系统错误');
                    }
                });
            }

        });

        //调起支付接口
        function startJsApiPay(order_num) {
            $.ajax({
                type: "post",
                url: 'http://zoomyoung.cn/api/payment/payByWechatJsApi',
                dataType: "json",
                xhrFields: {
                    withCredentials: true,
                },
                crossdomain: true,
                data: {
                    order_num: order_num
                },
                success: function (obj) {
                    if (obj.level == "success") {
                        WXPayment(obj.data, order_num);
                    } else {
                        alert('生成订单失败');
                    }
                },
                error: function (obj) {
                    console.log(obj);
                }
            });
        }

//手机判断用户是否支付
        function WXPayment(configJSON, orderNum) {
            if (typeof WeixinJSBridge === 'undefined') {
                alert('请用手机端打开')
                return false;
            }
            WeixinJSBridge.invoke('getBrandWCPayRequest', configJSON, function (res) {
                switch (res.err_msg) {
                    case 'get_brand_wcpay_request:cancel':
                        alert('用户取消支付！');
                        break;
                    case 'get_brand_wcpay_request:fail':
                        alert('支付失败！（' + res.err_desc + '）');
                        break;
                    case 'get_brand_wcpay_request:ok':
                        check(orderNum);
                        break;
                    default:
                        alert(JSON.stringify(res));
                        break;
                }
            });
        }

        //给订单号到后台，从微信那边过去是否付款成功，用户是否付款成功是用这个为依据，而不是手机判断的依据
        function check(orderNum) {
            var data = $.doPostDataAjax('http://zoomyoung.cn/api/payment/checkPayResult', 'json', false, {"order_num": orderNum});
            if (data.message != 'no_pay') {
                window.location.href = './finish.html' + search;
            }
            else {
                alert('支付失败!');
            }
        }

        $('.name').blur(function () {
            var value = $(this).val();
            if (value != "") {
                $('.write_detail li').eq(0).removeClass('error');
            }
        });

        var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
        $('.tel').blur(function () {
            var value = $(this).val();

            if (myreg.test(value)) {
                $('.write_detail li').eq(1).removeClass('error');
            }
        });

        $('.area').blur(function () {
            var value = $(this).val();
            if (value != "") {
                $('.write_detail li').eq(2).removeClass('error');
            }
        });

        $('#location').blur(function () {
            var value = $(this).val();
            if (value != "") {
                $('.write_detail li').eq(3).removeClass('error');
            }
        });

        function yan(name, tel, jie, city, oli) {
            if (name != "" && tel != "" && jie != "" && city != "") {
                return true;
            } else {
                if (name == "") {
                    oli.eq(0).addClass('error');
                    return false;
                }

                if (!myreg.test(tel))     //电话号码不能为空
                {
                    oli.eq(1).addClass('error');
                    return false;
                }
                if (jie == "")     //街道信息不能为空
                {
                    oli.eq(3).addClass('error');
                    return false;
                }
                if (city == "")    //地址不能为空
                {
                    oli.eq(2).addClass('error');
                    return false;
                }
            }
        }


        //点击input和textarea框的时候获取当前input的位置
        var a = "";
        $('input').focus(function () {
            a = $(this).offset().top + $('.zhang').scrollTop();
        })
        $('textarea').focus(function () {
            a = $(this).offset().top + $('.zhang').scrollTop() + 20;
        })
        ruanKey();
        //获取当前window的高度
        function ruanKey() {
            var clientHight = $(window).height();
            var u = navigator.userAgent;     //判断是否为安卓    因为苹果自带了软键盘弹出时候input会悬浮在上面
            if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
                window.addEventListener("resize", function () {    //当弹出软键盘的时候，window的大小会改变
                    var clientHightSmall = $(window).height();
                    if (clientHight == clientHightSmall) {
                        $('.footer').show();
                    } else {
                        $('.footer').hide();
                        $('.zhang').scrollTop(a - (clientHight - clientHightSmall));
                    }
                });
            } else {
                window.addEventListener("resize", function () {    //ios的时候不需要scroll  因为已经自带了这个功能
                    var clientHightSmall = $(window).height();
                    if (clientHight == clientHightSmall) {
                        $('.footer').show();
                    } else {
                        $('.footer').hide();
                    }
                });
            }
        }


        //返回的是字符串形式的参数，例如：class_id=3&id=2&
        function getUrlArgStr() {
            var q = location.search.substr(1);
            var qs = q.split('&');
            var argStr = '';
            if (qs) {
                for (var i = 0; i < qs.length; i++) {
                    argStr += qs[i].substring(0, qs[i].indexOf('=')) + '=' + qs[i].substring(qs[i].indexOf('=') + 1) + '&';
                }
            }
//        console.log(argStr)
            return argStr;
        }

        //返回的是对象形式的参数
        function getUrlArgObject() {
            var args = new Object();
            var query = location.search.substring(1);//获取查询串
            var pairs = query.split(",");//在逗号处断开
            for (var i = 0; i < pairs.length; i++) {
                var pos = pairs[i].indexOf('=');//查找name=value
                if (pos == -1) {//如果没有找到就跳过
                    continue;
                }
                var argname = pairs[i].substring(0, pos);//提取name
                var value = pairs[i].substring(pos + 1);//提取value
                args[argname] = unescape(value);//存为属性
            }
            return args;//返回对象
        }
    });

    



</script>
<script src="http://file.zoomyoung.cn/web/js/framework7.min.js"></script>
<script src="js/regionsObject2.js"></script>
<script src="js/cityPicker.js"></script>
</body>
</html>